<!-- 搜索表单 -->
<template>
	<div>
		<el-form class="input" inline :label-width="searchSet.labelWidth||labelWidth" v-if="searchForm.length>0" @submit.native.prevent>
			<el-form-item v-for="item in searchForm" :key="item.prop" :label="item.label+':'">
				<!-- 输入框 -->
				<el-input v-if="item.type==='Input'" :style="'width:'+item.width" :size="item.size || size" v-model="searchData[item.prop]" :placeholder="item.placeholder" @keyup.enter.native="item.enternative" />
				<!-- 下拉框 -->
				<el-select v-if="item.type==='Select'" :style="'width:'+item.width" :size="item.size || size" v-model="searchData[item.prop]" filterable clearable @change="item.change(searchData[item.prop])">
					<el-option v-for="(op, index) in item.options" :key="index" :label="op.label" :value="op.value" />
				</el-select>
				<!-- 单选 -->
				<el-radio-group v-if="item.type==='Radio'" v-model="searchData[item.prop]">
					<el-radio v-for="ra in item.radios" :key="ra.value" :label="ra.value">{{ ra.label }}</el-radio>
				</el-radio-group>
				<!-- 单选按钮 -->
				<el-radio-group v-if="item.type==='RadioButton'" v-model="searchData[item.prop]" @change="item.change && item.change(searchData[item.prop])">
					<el-radio-button v-for="ra in item.radios" :key="ra.value" :label="ra.value">{{ ra.label }}</el-radio-button>
				</el-radio-group>
				<!-- 复选框 -->
				<el-checkbox-group v-if="item.type==='Checkbox'" v-model="searchData[item.prop]">
					<el-checkbox v-for="ch in item.checkboxs" :key="ch.value" :label="ch.value">{{ ch.label }}</el-checkbox>
				</el-checkbox-group>
				<!--  年份选择器      -->
				<el-date-picker v-if="item.type==='year'" :style="'width:'+item.width" :size="item.size || size" v-model="searchData[item.prop]" value-format="yyyy-MM-dd HH:mm:ss" type="year" placeholder="选择年" @change="item.change(searchData[item.prop])">
				</el-date-picker>
				<!-- 日期 -->
				<el-date-picker v-if="item.type==='Date'" :size="item.size || size" v-model="searchData[item.prop]" />
				<!-- 时间 -->
				<el-time-select v-if="item.type==='Time'" :size="item.size || size" v-model="searchData[item.prop]" type="" />
				<!-- 日期时间 -->
				<el-date-picker v-if="item.type==='DateTime'" :style="'width:'+item.width" :size="item.size || size" v-model="searchData[item.prop]" type="datetime" :disabled="item.disable && item.disable(searchData[item.prop])" />
				<!-- 日期和时间范围选择器  -->
				<el-date-picker v-if="item.type==='daterange'" :size="item.size || size" v-model="searchData[item.prop]" value-format="yyyy-MM-dd HH:mm:ss" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" />
				<!--  年月      -->
				<el-date-picker v-if="item.type==='monthrange'" :size="item.size || size" v-model="searchData[item.prop]" type="monthrange" range-separator="-" start-placeholder="开始月份" end-placeholder="结束月份">
				</el-date-picker>
				<!-- 日期和时间范围(最新)       -->
				<el-date-picker v-if="item.type==='datetimerange'" :style="'width:'+item.width" :size="item.size || size" v-model="searchData[item.prop]" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="item.change(searchData[item.prop])">
				</el-date-picker>
				<!-- 滑块 -->
				<!-- <el-slider v-if="item.type==='Slider'" v-model="searchData[item.prop]"></el-slider> -->
				<!-- 开关 -->
				<el-switch v-if="item.type==='Switch'" v-model="searchData[item.prop]" />
			</el-form-item>
			<el-form-item>
				<el-form v-if="searchSet.searchButtenShow" inline class="button">
					<el-form-item v-for="item in searchHandle" :key="item.label">
						<el-button :type="item.type" :size="item.size || size" :icon="item.icon" @click="item.handle()">
							{{ item.label }}</el-button>
					</el-form-item>
				</el-form>
			</el-form-item>
		</el-form>

	</div>
</template>

<script>
export default {
	props: {
		isHandle: {
			type: Boolean,
			default: true,
		},
		labelWidth: {
			type: String,
			default: "80px",
		},
		size: {
			type: String,
			default: "small",
		},
		searchSet: {
			type: Object,
			default: {},
		},
		searchForm: {
			type: Array,
			// eslint-disable-next-line vue/require-valid-default-prop
			default: [],
		},
		searchHandle: {
			type: Array,
			// eslint-disable-next-line vue/require-valid-default-prop
			default: () => [],
		},
		searchData: {
			type: Object,
			// eslint-disable-next-line vue/require-valid-default-prop
			default: {},
		},
	},
	mounted: function () { },
	data() {
		return {};
	},
	methods: {
		// 置空参数
		clearParams(val) {
			// eslint-disable-next-line no-return-assign
			Object.keys(this.searchData).forEach(
				(key) => (this.searchData[key] = "")
			);
		},
	},
};
</script>
<style scoped>
.input {
	float: left;
}
.button {
	float: left;
}
.el-form-item {
	margin-bottom: 8px;
}
.el-form-item__content {
	line-height: 20px;
	height: 20px;
}
</style>
